<!DOCTYPE html>
<html>
	<head>
		<title>Fitocracy Companion options</title>
		<script type="text/javascript" src="common.js"></script>
		<script type="text/javascript">
			var options;
			
			function init() {
				options = loadOptions();
				$('notifierEnabled').checked = options.notifierEnabled;
				$('desktopNotifications').checked = options.desktopNotifications;
				$('display1RMInFeed').checked = options.display1RMInFeed;
				$('groupsDropdown').checked = options.groupsDropdown;
				$('hideWorkouts').checked = options.hideWorkouts;
				document.querySelectorAll('input[name="openNotificationsIn"][value="' + options.openNotificationsIn + '"]')[0].checked = true;
			}

			function onChange() {
				$('desktopNotificationsGroup').style.display = $('notifierEnabled').checked ? 'block' : 'none';
					
				saveOptions({
					notifierEnabled: $('notifierEnabled').checked,
					desktopNotifications: $('desktopNotifications').checked,
					display1RMInFeed: $('display1RMInFeed').checked,
					groupsDropdown: $('groupsDropdown').checked,
					hideWorkouts: $('hideWorkouts').checked,
					openNotificationsIn: parseInt(document.querySelectorAll('input[name="openNotificationsIn"]:checked')[0].value)
				});
			}
		</script>
		<style>
			body {
				font-family: Arial, sans-serif; 
				font-size: 13px;
				padding: 20px;
			}
			h1 {
				border-bottom: 1px solid #EEE;
				color: #53637D;
				font-size: 200%;
				font-weight: normal;
				margin: 0;
				padding-bottom: 4px;
				padding-top: 13px;
				text-shadow: white 0 1px 2px;
			}
			h3 {
				font-size: 105%;
				font-weight: bold;
			}
			.displaytable {
				display: table;
				width: 100%;
			}
			section {
				display: table-row;
			}
			section > * {
				display: table-cell;
				border-bottom: 1px solid #EEE;
				padding-top: 17px;
				padding-bottom: 20px;
			}
			section > h3 {
				width: 130px;			
			}		
			div.checkbox, div.radio {
				margin: 5px 0;
			}
			.informational-text {
				color: grey;
			}
			.suboption {
				-webkit-margin-start: 16px;
			}
			#footer {
				position: fixed;
				padding: 20px;
				bottom: 0px;
			}
		</style>
	</head>
	<body onload="init();">
		<h1>Fitocracy Companion options</h1>
		<div class="displaytable">
		<section>
		<h3>Notifications</h3>
		<div>
		<div class="checkbox"><label><input type="checkbox" id="notifierEnabled" onchange="onChange()"> Enable notifications</label></div>
		<div id="desktopNotificationsGroup">
			<div class="checkbox"><label><input type="checkbox" id="desktopNotifications" onchange="onChange()"> Desktop notifications</label></div>
			<div class="suboption informational-text">If not checked, notifications will only be visible via the toolbar button.</div>
			<div class="radio"><label><input type="radio" id="openNotificationsIn1" name="openNotificationsIn" onchange="onChange()" value="1"> Open notifications in new tab</label></div>
			<div class="radio"><label><input type="radio" id="openNotificationsIn2" name="openNotificationsIn" onchange="onChange()" value="2"> Open notifications in current tab</label></div>
		</div>
		</div>
		</section>
		<section>
		<h3>Misc.</h3>
		<div>
			<div class="checkbox"><label><input type="checkbox" id="groupsDropdown" onchange="onChange()"> Groups drop-down menu</label></div>
			<div class="suboption informational-text">You need to visit your "Profile" or "Groups" page at least once for this to work.</div>
			<div class="checkbox"><label><input type="checkbox" id="hideWorkouts" onchange="onChange()"> Hide workout details</label></div>
			<div class="suboption informational-text">Hides workout details in your activity feed and displays a workout summary instead.<br>
				Details can be displayed via an "Expand" link.</div>
			<div class="checkbox"><label><input type="checkbox" id="display1RMInFeed" onchange="onChange()"> Display one rep maximums (1RM) in activity feeds</label></div>
			<div class="suboption informational-text">One rep maximums are calculated with the Brzycki formula.
				<a href="http://en.wikipedia.org/wiki/One-repetition_maximum" target="_blank">Learn more</a><br>
				For better accuracy, 1RMs are displayed only for sets of 10 reps max.</div>
		</div>
		</section>
		</div>
		<div id="footer">&copy; 2012 Romain Vallet</div>
	</body>
</html>